<template>
  <div class="container mx-auto">
    <div class="text-red-500 text-2xl text-center my-12">Hello</div>
    <div class="w-full flex flex-wrap gap-6">
      <!-- <this-select :options="options" v-model="selected" /> -->
      <div v-for="(item, index) in all" :key="index" class="flex items-center">
        <img :src="item.img" width="200" height="110" />
        <div class="ml-4 space-y-4">
          <div>{{ item.author }}</div>
          <div>{{ item.date }}</div>
        </div>
      </div>
    </div>
    <div class="my-12">
      <el-button type="primary" @click="onLoad">click me</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      //   name: 'test',
      all: [],
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      this.axios.get('/msg1').then((res) => {
        this.all = res.data
        // console.log(res.data)
      })
    },
  },
}
</script>
